<template>
  <div class="roc-dict-tag">
    <template v-for="(v, i) in valueList" :key="v">
      <template v-if="optionsObj[v]">
        <!-- tag 标签 -->
        <template v-if="optionsObj[v].elTagType">
          <el-tag :type="optionsObj[v].elTagType">{{ optionsObj[v].label }}</el-tag>
        </template>
        <!-- 文字颜色样式 -->
        <template v-else-if="optionsObj[v].elTagClass">
          <span :class="[optionsObj[v].elTagClass]">{{ optionsObj[v].label }}</span>
          <span v-if="i < valueList.length - 1">{{ dot }}</span>
        </template>
        <!-- 普通文字 -->
        <template v-else>
          <span>{{ optionsObj[v].label }}</span>
          <span v-if="i < valueList.length - 1">{{ dot }}</span>
        </template>
      </template>
      <template v-else>
        <span v-if="showValue">{{ v }}</span>
      </template>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 数据
  options: {
    type: Array,
    required: true,
  },
  // 当前的值
  value: {
    type: [Number, String, Array],
    required: true,
  },
  // 当未找到匹配的数据时是否显示value
  showValue: {
    type: Boolean,
    default: true,
  },
  // 使用分隔符 默认“、”
  dot: {
    type: String,
    default: '、',
  },
})

const optionsObj = computed(() => {
  const obj = {}
  props.options.forEach((item) => {
    obj[item.value] = item
  })
  return obj
})

const valueList = computed(() => {
  let list
  if (!Array.isArray(props.value)) {
    if (typeof props.value === 'string' && props.value.indexOf(',') !== -1) {
      list = props.value.split(',')
    } else {
      list = [props.value]
    }
  } else {
    list = props.value
  }
  return list
})
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.primary {
  color: #409eff;
}
.success {
  color: #67c23a;
}
.info {
  color: #909399;
}
.warning {
  color: #e6a23c;
}
.danger {
  color: #f56c6c;
}
</style>
